<template>
	<div class="banner">
	
	<!-- 主界面 -->
	<div class="main">
		<!-- 顶部 -->
		<div class="banner-top">
			<div class="city">
				<router-link to="/Lian_ji">
					<label>{{cityName}}</label>
				</router-link>
				<i class="iconfont">&#xe600;</i>
			</div>
			<!-- 搜索 -->
			<form class="search">
				<i class="iconfont">&#xe616;</i>
				<input type="text" placeholder="国内秋色盘点大全"/>
			</form>
			<div class="redian">
				<ul>
					<li>
						<span>热搜</span>
					</li>
					<li>
						<span>普莫措</span>
					</li>
					<li>
						<span>四明山</span>
					</li>
					<li>
						<span>温泉滑雪</span>
					</li>
					<li>
						<span>赏银杏</span>
					</li>
				</ul>
			</div>
		</div>
		<div class="swiper banner-swiper" >
			<ul class="swiper-wrapper">
				<li class="swiper-slide" v-for="item in picture" :key="item.id">
					<img :src="item.url" />
				</li>
			</ul>
			<div class="swiper-pagination"></div><!--分页器。如果放置在swiper外面，需要自定义样式。-->
		</div>
	</div>
	</div>
</template>

<script>
	// 1引入vue周期函数
	import {onMounted} from 'vue';
	// 2引入swiper的动态组件
	import Swiper ,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	} from 'swiper';
	// 3swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination])
	
	//引入State的辅助函数
	import {mapState} from 'vuex';
	export default{
		name:'Banner',
		data(){
			return{
				picture:[
					{id:1,url:require('@/assets/img/1.jpg')},
					{id:2,url:require('@/assets/img/2.jpg')},
					{id:3,url:require('@/assets/img/3.jpg')},
					{id:4,url:require('@/assets/img/4.jpg')},
					{id:5,url:require('@/assets/img/5.jpg')},
					{id:5,url:require('@/assets/img/6.jpg')},
					{id:5,url:require('@/assets/img/7.jpg')},
					{id:5,url:require('@/assets/img/8.jpg')},
				],
			}
		},
		computed:{
			//接受state内部的cityName变量
			...mapState(['cityName']),
		},
		// 4设置应用swiper的位置以及具体操作
		setup(){
			onMounted ( ()=> {
				new Swiper('.banner-swiper',{
					// 循环播放
					loop : true,
					// 设置分页器效果
					pagination : {
						el:'.swiper-pagination'
					},
					// 设置播放项:时间、不停止、不暂停自动
					autoplay : {
						delay : 3000,
						stopOnLastSlide : false,
						disableOnInteraction : false,
					}
				})
			})
		}
		
	}
</script>

<style>
	.main{
		width: 100%;
		height: 14.5rem;
		background-color: gold;
	}
	
	.banner-top{
		width: 100%;
	}
	.banner-top .city{
		width: 20%;
		margin-left: 1rem;
		padding-top: 1rem;
		font-weight: bold;
		font-size: 1.2rem;
		float: left;
	}
	.banner-top .city a{
		text-decoration: none;
		color: #000000;
	}
	
	.banner-top .search{
		width: 70%;
		float: left;
		background-color: #FFFFFF;
		line-height: 1rem;
		margin-top: 0.5rem;
		line-height: 2rem;
		text-indent: 1rem;
		border-radius: 2rem;
	}

	.banner-top .search input{
		border: none;
		width: 70%;
		line-height: 1rem;
		font-size: 1.2rem;
	}
	
	.banner-top .redian{
		line-height: 3.5rem;
		width: 100%;
		
	}
	.banner-top .redian li{
		display: flex;
		justify-content: center;
		float: left;
		width: 20%;
		background-color: #FFD700;	
	}
	.banner-top .redian li span{
		margin-top: 0.7rem;
		width: 5rem;
		text-align: center;
		background-color: #ffeea0;	
		line-height: 2rem;
		margin-bottom: 0.7rem;
		border: 0.1rem solid #bdb077;
		border-radius: 1rem;
	}
	
	
	/* 轮播区域的样式 */
	.banner-swiper{
		border-radius: 1rem;
		width: 94%;
		height: 11rem;
	}
	.banner-swiper img{
		width: 100%;
		height: 100%;
	}
	
	/* 穿透*/
	.swiper-pagination  :deep(.swiper-pagination-bullet-active){
		background-color: white;
	}
	
	
	
</style>
